<template>
	<view class="mine-container">
		<!-- 顶部用户信息区域 -->
		<view class="user-header" :style="{
			backgroundImage: `url(${config.commonUrl}/me_bg.png)`,
			paddingTop: `calc(80rpx + ${safeAreaTop}px)`
		}">
			<!-- 用户信息卡片 -->
			<view class="user-card" @click="toPage('/pages/index/mineInfo')" v-if="isLogin()">
				<view class="user-avatar">
					<image :src="`${userInfo.avatar}`" mode="aspectFill"></image>
					<view class="avatar-status" v-if="userInfo.isOwner">
						<text class="status-icon">✓</text>
					</view>
				</view>
				<view class="user-info">
					<text class="user-name">{{userInfo.nickname}}</text>
					<view class="user-community">
						<text class="community-icon">🏘️</text>
						<text
							class="community-name">{{userInfo.community && userInfo.community.name ? userInfo.community.name : userInfo.communityName || '未选择小区'}}</text>
					</view>
				</view>
				<view class="user-arrow">
					<text class="arrow-icon">›</text>
				</view>
			</view>

			<!-- 未登录状态 -->
			<view class="user-card" @click="toPage('/pages/index/login')" v-else>
				<view class="user-avatar">
					<image :src="config.commonUrl + '/avt.png'" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<text class="user-name">未登录</text>
					<view class="user-community">
						<text class="community-icon">🏘️</text>
						<text class="community-name">未选择小区</text>
					</view>
				</view>
				<view class="user-arrow">
					<text class="arrow-icon">›</text>
				</view>
			</view>

			<!-- 数据统计卡片 -->
			<view class="stats-card">
				<view class="stat-item" @click="toPage(item.url)" v-for="item in tabList" :key="item.label">
					<text class="stat-number">{{statInfo[item.label]||0}}</text>
					<text class="stat-label">{{item.title}}</text>
				</view>
			</view>
		</view>

		<!-- 认证状态卡片 -->
		<view class="auth-card">
			<image :src="config.commonUrl + '/authentication.png'" mode="aspectFit" v-if="!userInfo.isOwner"
				@click="toPage('/pages/mePages/certifiedOwners')"></image>
			<image :src="config.commonUrl +'/authentication_sucss.png'" mode="aspectFit"
				@click="toPage('/pages/mePages/ownerInfo')" v-else></image>
		</view>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 常用工具 -->
			<view class="section-card">
				<view class="section-header">
					<text class="section-title">常用工具</text>
				</view>
				<view class="tools-grid">
					<view class="tool-item" @click="toPage(item.url)" v-for="(item,idx) in tabList3" :key="idx">
						<view class="tool-icon">
							<image :src="config.commonUrl + (item.icon || '/default-icon.png')" mode="aspectFit">
							</image>
						</view>
						<text class="tool-name">{{item.title}}</text>
					</view>
				</view>
			</view>

			<!-- 我的服务 -->
			<view class="section-card">
				<view class="section-header">
					<text class="section-title">我的服务</text>
				</view>
				<view class="services-grid">
					<view class="service-item" v-for="(item,idx) in tabList4" :key="idx"
						v-show="!item.showIfOwner || (item.showIfOwner && (userInfo.shops && userInfo.shops.length > 0))">
						<button class="service-btn" open-type="contact" v-if="item.title == '联系客服'">
							<view class="service-icon">
								<image :src="config.commonUrl + (item.icon || '/default-icon.png')" mode="aspectFit">
								</image>
							</view>
							<text class="service-name">{{item.title}}</text>
						</button>
						<view class="service-content" @click="toPage(item.url)" v-else>
							<view class="service-icon">
								<image :src="config.commonUrl + (item.icon || '/default-icon.png')" mode="aspectFit">
								</image>
							</view>
							<text class="service-name">{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<TabBar :PageCur="'mine'" />
	</view>
</template>

<script>
	import TabBar from '@/components/tabBar.vue';
	import config from '@/config/config';
	import storage from "@/utils/storage.js";
	import {
		statInfo
	} from "@/api/mine.js"

	export default {
		components: {
			TabBar,
		},
		data() {
			return {
				config,
				userInfo: {},
				statInfo: {},
				safeAreaTop: 0,
				tabList: [{
						title: '佣金',
						url: '/pages/mePages/balanceDetails',
						label: 'balance',
					},
					{
						title: '圈子',
						url: '/pages/mePages/personalCircle',
						label: 'postCount',
					},
					{
						title: '信誉分',
						url: '/pages/mePages/rating',
						label: 'creditScore',
					},
					{
						title: '服务发布',
						url: '/pages/mePages/myService',
						label: 'serviceOrderCount',
					},
				],
				tabList3: [{
						title: '购买订单',
						url: '/pages/mePages/samOrder',
						icon: '/icon设计-15.png'
					},
					{
						title: '投诉建议',
						url: '/pages/mePages/complaintsSuggestions',
						icon: '/icon设计-24.png'
					},
					{
						title: '地址管理',
						url: '/pages/mePages/address/addressManagement',
						icon: '/icon设计-16.png'
					},
					{
						title: '消息订阅',
						url: '/pages/mePages/messageSubscription',
						icon: '/icon设计-21.png'
					},
				],
				tabList4: [{
						title: '联系客服',
						url: '',
						icon: '/icon设计-18.png'
					},
					{
						title: '商家中心',
						url: '/pages/mePages/shopCenter/index',
						icon: '/seller.png',
						showIfOwner: true
					},
					{
						title: '认证信息',
						url: '/pages/mePages/ownerInfo',
						icon: '/icon设计-19.png'
					},
					{
						title: '优惠券',
						url: '/pages/mePages/coupon',
						icon: '/icon设计-20.png'
					},
					{
						title: '官方群聊',
						url: '/pages/mePages/about/code',
						icon: '/icon设计-14.png'
					},
					{
						title: '使用须知',
						url: '/pages/mePages/InstructionsForUse',
						icon: '/icon设计-17.png'
					},
					{
						title: '关于我们',
						url: '/pages/mePages/editionIntro',
						icon: '/icon设计-23.png'
					},
				],
			};
		},

		onShow() {
			this.userInfo = storage.getUserInfo() || {}
			console.log(this.userInfo);
			if (this.userInfo._id) {
				this.initMine()
			}
			// 获取安全区域高度
			this.getSafeAreaHeight()
		},
		onLoad() {
			// 监听用户信息更新事件
			uni.$on('userInfoUpdated', this.handleUserInfoUpdate);
		},
		onUnload() {
			// 移除事件监听
			uni.$off('userInfoUpdated', this.handleUserInfoUpdate);
		},
		methods: {
			// 处理用户信息更新
			handleUserInfoUpdate(userInfo) {
				this.userInfo = userInfo;
				// 如果用户信息更新了，重新初始化页面数据
				if (userInfo._id) {
					this.initMine();
				}
			},
			initMine() {
				statInfo().then(res => {
					this.statInfo = res.data.data
				})
			},
			toPage(route) {
				if (route == '/pages/mePages/ownerInfo' && !this.userInfo.isOwner) {
					uni.showToast({
						title: "未认证",
						icon: "error",
					});
					return
				}
				if (route == '/pages/mePages/certifiedOwners' && this.userInfo.hasSubmittedAuth) {
					uni.showToast({
						title: "审核中",
						icon: "error",
					});
					return
				}
				if (route) {
					this.$router.smartNavigate(route)

				}
			},
			isLogin() {
				// 检查登录状态
				return storage.getAccessToken() !== ''
			},
			getSafeAreaHeight() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync()
				// 计算安全区域高度
				this.safeAreaTop = systemInfo.statusBarHeight || 44
				console.log('安全区域高度:', this.safeAreaTop)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 顶部用户信息区域
	.user-header {
		position: relative;
		padding: 0 32rpx 120rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;

		.user-card {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 20rpx;
			padding: 24rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10rpx);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
			}

			.user-avatar {
				position: relative;
				margin-right: 24rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 4rpx solid rgba(255, 255, 255, 0.8);
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				}

				.avatar-status {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 32rpx;
					height: 32rpx;
					background: #52C41A;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid white;
					box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.4);

					.status-icon {
						color: white;
						font-size: 20rpx;
						font-weight: 700;
					}
				}
			}

			.user-info {
				flex: 1;

				.user-name {
					font-size: 36rpx;
					font-weight: 700;
					color: #333;
					line-height: 1.4;
					margin-bottom: 8rpx;
					display: block;
				}

				.user-community {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.community-icon {
						font-size: 24rpx;
					}

					.community-name {
						font-size: 26rpx;
						color: #666;
					}
				}
			}

			.user-arrow {
				color: #999;
				font-size: 32rpx;
				font-weight: 300;
			}
		}

		.stats-card {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 20rpx;
			padding: 32rpx 24rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10rpx);

			.stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
				}

				.stat-number {
					font-size: 40rpx;
					font-weight: 700;
					color: #FF6B35;
					line-height: 1.2;
					margin-bottom: 8rpx;
				}

				.stat-label {
					font-size: 24rpx;
					color: #666;
					font-weight: 500;
				}
			}
		}
	}

	// 认证状态卡片
	.auth-card {
		position: relative;
		margin: -60rpx 32rpx 0;
		z-index: 10;

		image {
			width: 100%;
			height: 120rpx;
			border-radius: 16rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}
		}
	}

	// 主要内容区域
	.main-content {
		padding: 32rpx;
	}

	// 功能卡片
	.section-card {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

		.section-header {
			padding: 32rpx 24rpx 24rpx;
			border-bottom: 1px solid #f0f0f0;

			.section-title {
				font-size: 32rpx;
				font-weight: 700;
				color: #333;
			}
		}
	}

	// 工具网格
	.tools-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32rpx;
		padding: 32rpx 24rpx;

		.tool-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.9);
			}

			.tool-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
				border-radius: 20rpx;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.tool-name {
				font-size: 24rpx;
				color: #666;
				text-align: center;
				line-height: 1.4;
			}
		}
	}

	// 服务网格
	.services-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32rpx;
		padding: 32rpx 24rpx;

		.service-item {
			.service-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				background: transparent;
				border: none;
				padding: 0;
				line-height: 1;
				font-size: inherit;
				transition: all 0.3s ease;

				&::after {
					border: none;
				}

				&:active {
					transform: scale(0.9);
				}

				.service-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
					border-radius: 20rpx;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.service-name {
					font-size: 24rpx;
					color: #666;
					text-align: center;
					line-height: 1.4;
				}
			}

			.service-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.9);
				}

				.service-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
					border-radius: 20rpx;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.service-name {
					font-size: 24rpx;
					color: #666;
					text-align: center;
					line-height: 1.4;
				}
			}
		}
	}

	// 兼容旧样式
	.cu-item {
		padding: 24rpx;
		margin: 0 !important;
	}

	.me_top {
		position: relative;
		padding: 80px 32rpx;
		width: 100%;
		height: 30vh;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.user {
			margin-right: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 700;
			font-size: 16px;
			color: #793e25;
			line-height: 48rpx;
		}

		.icon_image {
			margin-right: 24rpx;
			width: 124rpx;
			height: 124rpx;
			background: #793e25;
			border-radius: 50%;
		}

		.user_phone {
			font-weight: 400;
			font-size: 28rpx;
			color: #793e25;
			line-height: 44rpx;
		}

		.me_tab {
			margin-top: 20px;

			.tab_item_text {
				font-weight: 700;
				font-size: 14px;
				color: #793e25;
				line-height: 40rpx;
				text-align: center;
			}
		}
	}

	.mine_content {
		position: relative;
		padding: 24rpx;

		.authentication {
			position: absolute;
			top: -25px;
			left: 24rpx;
			right: 24rpx;
			height: 60px;
		}

		.mine_content_tag {
			margin-top: 35px;
		}
	}

	.me_tab_tree {
		margin-top: 0;
		height: auto;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 32rpx;

		.tab_item_img {
			width: 30px;
			height: 30px;
		}
	}

	.me_tab_item_btn {
		margin: 0;
		padding: 0;
		font-size: 28rpx;
		border: 0;
		background-color: #fff;
		color: rgba(0, 0, 0, .7) !important;
	}

	.me_tab_item_btn::after {
		height: auto !important;
		border: 0 !important;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>